<template>
  <div class="container" :style="backgroundDiv">

    <!-- 光晕 -->
    <div class="light"></div>

    <!-- 标头 -->
    <div class="header">
      <!-- 右侧 -->
      <div class="left">
        <!-- logo -->
        <div class="logo">
          <a href="#">
            <img src="@/assets/imgs/new-logo.png" alt="">
          </a>
        </div>
        <!-- 首页 / 转运 -->
        <div class="home">
          <span>{{ $t("home.home") }}</span>
          <span> / </span>
          <span>{{ $t("home.transport") }}</span>
        </div>
        <!-- 北京时间 -->
        <div class="time">
          <Time></Time>
        </div>
      </div>

      <!-- 右侧 -->
      <div class="right">
        <!-- 购物车图标 -->
        <div class="top1">
          <a href="#" @click="toShopCar">
            <img src="@/assets/imgs/new-top-1.png" alt="" />
          </a>
        </div>
        <!-- 物流图标 -->
        <div class="top2" @mouseenter="arraws.one = true" @mouseleave="arraws.one = false">
          <img src="@/assets/imgs/new-top-2.png" alt=""  @click="toUserManagement"/>
          <myArrows width="30px" height="30px" color="#444444" :isHovered="arraws.one"></myArrows>
        </div>
        <!-- 客服图标 -->
        <div class="top3" @mouseenter="arraws.two = true" @mouseleave="arraws.two = false">
          <img src="@/assets/imgs/new-top-3.png" alt="" />
          <myArrows width="30px" height="30px" color="#444444" :isHovered="arraws.two"></myArrows>
        </div>
        <!-- 注册 -->
        <div class="register" @click="register">
          {{ $t("home.register") }}
        </div>
        <!-- 登录 -->
        <div class="signIn" @click="btn">
          {{ $t("home.login") }}
        </div>
      </div>
    </div>

    <!-- 语言切换 / 汇率切换-->
    <div class="language">
      <LangChange></LangChange>
    </div>

    <!-- 中国好物寄全球 -->
    <div class="text">
      {{ $t("home.chinaNiceGoodstoWorld") }}
    </div>


    <!-- 搜索框 -->
    <div class="searchBox">
      <div class="search">
        <input type="text" :placeholder="$t('home.inputText')" v-model="linkAddress">
      </div>

      <!-- 搜索图标 -->
      <div class="searchBtn" @click="toMoodsShow">
        <span>{{ $t("home.search") }} ></span>
      </div>

    </div>


  </div>
</template>

<script>
// 北京时间组件
import Time from '@/components/myHome/myBeiJingTime'
// 箭头组件
import myArrows from '@/components/myHome/myArrows'
// 语言汇率切换组件
import LangChange from '@/components/myHome/myLangChange'
export default {
  name: "index",
  components: {
    Time,
    myArrows,
    LangChange
  },
  data() {
    return {
      // 语言
      lang: 'zh-CN',
      // 顶部的两个箭头选择控制
      arraws: {
        one: false,
        two: false
      },
      // 北京图片
      backgroundDiv: {
        backgroundImage: 'url(' + require('@/assets/imgs/bg-search.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },
      // 存储链接地址
      linkAddress: ''
    }
  },
  // created() {
  //   // 获取localStorage，语言
  //   this.lang = localStorage.getItem('locale') || 'zh-CN'
  // },


  methods: {
    toUserManagement() {
      this.$router.push('/mySetPage/myOrder')
    },
    // 登录
    btn() {
      this.$router.push('/toLogin')
    },
    // 注册
    register() {
      this.$router.push('/register')
    },
    // 商品的展示
    toMoodsShow() {
      // 把id保存之后
      this.getItemId()
      // 地址栏不为空 跳转到商品展示界面
      // 地址栏为空，输出提示
      if (this.linkAddress) {
        this.$router.push({
          name: 'moodsShow'
        })

      } else {
        this.$message.error("地址输入框不能为空")
      }
    },

    getItemId() {
      const match = this.linkAddress.match(/[?&]id=(\d+)/)
      const value = match ? match[1] : '未找到ID';
      // this.$store.commit('myBaseValue/SET_PRODUCTLINKID', value)
      localStorage.setItem('productLinkId', value)
    },
    toShopCar() {
      this.$router.push('/mybuyCar')
    }
  }
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}



.container {
  width: 100%;
  height: 100vh;

  .light {
    background: linear-gradient(180deg, #fbf4ba, hsla(54, 89%, 86%, 0));
    height: 250px;
    position: absolute;
    width: 100vw !important;
  }

  // 标头
  .header {
    padding: 0px 100px;

    display: flex; // 添加flex布局
    align-items: center; // 垂直居中
    justify-content: space-between;

    width: 1190px;
    height: 50px;
    line-height: 50px;
    min-width: 1190px;
    position: relative;
    width: 100%;
    z-index: 2;
    font-size: 12px;

    .left {
      display: flex; // 添加flex布局
      align-items: center; // 垂直居中

      // logo
      .logo a {
        height: 50px;
        line-height: 50px;
        display: flex; // 确保logo内容垂直居中
        align-items: center;

        img {
          width: 152px;
          height: 24px;
        }
      }

      // home
      .home {
        padding: 0 20px 0 30px;

        span {
          color: #31b38c;
          font-size: 14px;
          font-weight: 700;
        }
      }
    }

    .right {
      display: flex; // 添加flex布局
      align-items: center; // 垂直居中

      .top1 a {
        display: flex;
        align-items: center;
        margin-right: 10px;
      }

      .top2,
      .top3 {
        display: flex; // 确保logo内容垂直居中
        align-items: center;
        justify-content: center;
        // gap: 15px;
        height: 50px;
        line-height: 50px;
        // padding: 0 10px;
        margin-right: 5px;
        // background-color: white;

        img {

          padding-left: 10px;
        }
      }

      .top2:hover,
      .top3:hover {
        cursor: pointer;
        font-size: 14px;
        align-items: center;
        color: #00B2B9;
        background-color: white;
        display: flex;
        height: 50px;
        justify-content: center;
        // padding: 0 20px;
        position: relative;
        white-space: nowrap;
        z-index: 2;
      }

      .register {
        border: 1px solid #31b38c;
        background: transparent;
        border-radius: 40px;
        color: #31b38c;
        line-height: 22px;
        padding: 4px 29px;
        margin-right: 10px;
        cursor: pointer;
        position: relative;
        z-index: 999;
      }

      .signIn {
        border: 1px solid #31b38c;
        border-radius: 40px;
        color: #31b38c;
        line-height: 22px;
        padding: 4px 29px;
        cursor: pointer;
      }
    }
  }

  .language {
    padding: 10px 100px;
    margin-left: 70px;
  }

  .text {
    padding: 0px 100px;
    margin-top: 84px;
    // width: 100%;
    min-width: 1342px;
    height: 220px;
    font-size: 90px;
    font-weight: 400;
    letter-spacing: 10px;
    color: #fff;
    font-family: PingFang SC, microsoft yahei, STHeitiSC-Light, simsun, sans-serif;
  }

  // 搜索框
  .searchBox {
    padding: 0px 100px;

    // border: 1px solid #ddd;
    height: 60px;
    outline: none;
    transition: all .3s linear;
    // background: #fff;
    border-radius: 33px;
    font-size: 20px;
    text-indent: 30px;
    display: flex;

    .search {
      margin-right: 35px;

      input {
        // width: 100%;
        height: auto;
        display: flex;
        height: 60px;
        border: 1px solid #ddd;
        border-radius: 33px;
        outline: none;
        font-size: 20px;
        padding-left: 30px;
        width: 620px;

      }
    }

    .searchBtn {
      padding: 0px 100px;

      width: 130px;
      min-width: 130px;
      border-radius: 33px;
      align-items: center;
      background: linear-gradient(315deg, #55ffb8, #38ffe7);
      box-shadow: 0 10px 16px 0 rgba(0, 35, 100, .24);
      color: #100a3a;
      font-size: 24px;
      font-weight: 700;
      height: 60px;
      line-height: 60px;
      margin: auto 0 !important;
      padding: 0 !important;
      transition: all .3s linear;
      z-index: 2;
      cursor: pointer;

      /* 添加点击动画效果 */
      &:active {
        transform: translateY(2px);
        /* 点击时下移2像素 */
      }

      /* 悬停效果增强 */
      &:hover {
        transform: scale(1.02);
      }
    }
  }

}
</style>
